<script setup lang="ts">

/**
 * @title -手机号查询申请额度
 * @author -qqz
 * @date -2024-03-05
 */

import img_money from "../assets/image/ico_money.png"
import {ref, watch} from "vue"
import {showLoadingToast, showToast} from "vant";
import {applyLoan, sendSms} from "../api/apply";
import {useRouter} from "vue-router";
import {UserPreferenceStore} from "../utils/UserPreferenceStore.ts";
import {rsaEncrypt} from "@/utils/encrypt/aes/crypt.ts";


const phoneNumber = ref<string>('1502334171')
const captureCode = ref<string>('123456')
const countdown = ref(0)
const checked = ref(true)
const router = useRouter();

/** 展示验证码窗口 */
const activateInputCodeState = ref(false)

/** 申请状态0未申请 1请求中 2申请成功 */
const applyState = ref(0)


watch(countdown, (newValue) => {
  if (newValue === 0) {
    // 可以在倒计时结束后执行一些操作
  }
});


/**
 * 发送验证码
 */
const sendCaptcha = () => {
  // 在这里添加发送验证码的逻辑
  // 例如：调用API发送验证码到用户手机或邮箱
  showLoadingToast({
    message: '正在处理...',
    duration: 3000
  })

  sendSms({phone: rsaEncrypt(phoneNumber.value)}).then(() => {

    // 倒计时60秒
    if (countdown.value === 0) {
      countdown.value = 60;

      const timer = setInterval(() => {
        countdown.value -= 1;
        if (countdown.value === 0) {
          clearInterval(timer);
        }
      }, 1000);
    }

    showToast({
      message: '验证码已发送',
    });

  })
}

/**
 * 验证输入的手机号
 */
const validatePhoneNumber = () => {
  // 使用正则表达式验证输入是否为数字，并截断长度为11
  phoneNumber.value = phoneNumber.value.toString().replace(/\D/g, '').slice(0, 11);
}
/**
 * 验证输入的验证码
 */
const validateCaptureCode = () => {
  // 使用正则表达式验证输入是否为数字，并截断长度为11
  captureCode.value = captureCode.value.toString().replace(/\D/g, '').slice(0, 6);
}


/**
 * 提交
 */
const onSubmit = () => {

      if (phoneNumber.value.length < 11) {
        showToast({
          message: '请输入您手机号',
          position: 'top',
        });
        return
      }

      // 验证码小于6位时,显示验证码框
      if (captureCode.value.length < 5) {
        activateInputCodeState.value = true;
        showToast({
          message: '请输入验证码',
          position: 'top',
        });
        return;
      }


      if (!checked.value) {
        showToast({
          message: '请先同意协议',
          position: 'top',
        });
        return;
      }

      applyState.value = 1
      showLoadingToast({
        message: '正在处理...',
        forbidClick: true,
      });

      applyLoan({phone: rsaEncrypt(phoneNumber.value), captchaCode: captureCode.value}).then((res: any) => {
        // 变为布局2状态
        applyState.value = 2;
        // console.log(res);

        // 保存用户信息到本地
        UserPreferenceStore.getInstance().setUserInfo(res);

        setTimeout(() => {
          // 跳转到首页
          router.push({name: 'index'})
          // todo 2024年3月25日 11:23:43
          // router.push({name: 'loan'})
        }, 1000)

      })
    }
;

watch(phoneNumber, (n, o) => {
  // console.log(n);
  if (o.length === 10 && n.length !== 10) {
    activateInputCodeState.value = true;
  }
})

</script>

<template>
  <div id="app">

    <!-- 申请首页 -->
    <div class="card custom">
      <!-- 头部标签   -->
      <div class="user-background">
        <div style=" display: flex;justify-content: space-between;width: 80%; margin: 0 auto;">
          <div>
            <img style="width: 15px;vertical-align: middle" src="../assets/image/ico_draw_g.png">
            <span style="font-size: 12px;color: #6c3813;margin-left: 5px;">随借随用</span>
          </div>

          <div>
            <img style="width: 15px;vertical-align: middle" src="../assets/image/ico_draw_g.png">
            <span style="font-size: 12px;color: #6c3813;margin-left: 5px;">快速放款</span>
          </div>

          <div>
            <img style="width: 15px;vertical-align: middle" src="../assets/image/ico_draw_g.png">
            <span style="font-size: 12px;color: #6c3813;margin-left: 5px;">信息透明</span>
          </div>
        </div>
      </div>

      <!-- 申请内容  -->
      <div style="display: flex;flex-direction: column;align-items: center; padding-bottom:15px">
      <span
          style="margin-top:15px;font-size: 12px; color: #121736; font-weight: 400; text-align: center; line-height: .3rem; padding: 0.42rem 0 0.13rem 0;">最高可借额度(元)</span>
        <van-image style="width: 150px;margin-top: 15px" :src="img_money"></van-image>

        <van-form @submit="onSubmit">

          <div class="captcha-container">
            <input
                type="number"
                v-model.number="phoneNumber"
                class="captcha-input"
                @input="validatePhoneNumber"
                style="border-radius: 20px;"
                placeholder="输入手机号查询额度"/>
          </div>

          <div class="captcha-container" v-show="activateInputCodeState">
            <input
                type="number"
                v-model.number="captureCode"
                @input="validateCaptureCode"
                class="captcha-input"
                placeholder="请输入验证码"
            />
            <div style=" width: 0.03rem;"></div>
            <van-button class="captcha-button" @click.stop="sendCaptcha" :disabled="countdown > 0" native-type="button">
              {{ countdown > 0 ? `${countdown} 秒后重新获取` : '获取验证码' }}
            </van-button>
          </div>


          <div style="display: flex;justify-content: center">
            <van-checkbox checked-color="#00b85c" icon-size="12px" v-model="checked">已阅读并同意</van-checkbox>
            <span style="font-size: 12px;color: #888b9a">《注册服务协议》</span>
            <span style="font-size: 12px;color: #888b9a">《隐私政策》</span>
          </div>

          <van-button size="large" style="margin-top: 20px;" round type="success" block native-type="submit">
            <van-swipe
                vertical
                class="notice-swipe"
                :autoplay="3000"
                :touchable="false"
                :show-indicators="false">
              <van-swipe-item>查询我的额度</van-swipe-item>
              <van-swipe-item>利息低7.2%起</van-swipe-item>
              <van-swipe-item>最长30天免息</van-swipe-item>
            </van-swipe>
          </van-button>
          <!--        </van-cell-group>-->

        </van-form>
      </div>

      <!--      <van-image :src="bottom_bg"-->
      <!--                 style="margin-top: 50px;border-top-left-radius: 12px;border-top-right-radius: 12px;overflow: hidden"></van-image>-->
    </div>


  </div>
</template>


<style scoped>
#app {
  padding: 15px;
}

.custom {
  padding-top: 0;
  margin-top: 0;
}


.user-background {
  background-image: linear-gradient(120deg, #FFEDD3 0%, #FFF5E6 100%);
  width: 100%;
  padding-bottom: 5px;
  padding-top: 5px;
}

::v-deep .van-checkbox__label {
  font-size: 12px;
  color: #c8c9cc;
}


.notice-swipe {
  height: 40px;
  line-height: 40px;
}

/** 验证码 */
.captcha-container {
  display: flex;
  justify-content: center;
  margin: 10px auto;;
  align-items: center;
}

.captcha-input {
  flex: 1;
  border: none;
  border-radius: 20px 0 0 20px;
  background-color: #F3F3F5;
  color: #000;
  height: 28px;
  padding: 8px 8px 8px 16px;
  margin: 0;
  font-size: 14px;
  outline: none;

  transition: box-shadow 0.3s ease;
}


.captcha-button {
  border: none;
  border-radius: 0 20px 20px 0;
  color: #07c160;
  height: 2.76rem;
  white-space: nowrap;
  background-color: #F3F3F5;
  font-size: 13px;
  padding: 8px 12px 8px 8px;
}

/* 分割线 */
::v-deep .van-divider--vertical {
  display: inline-block;
  height: 1em;
  vertical-align: middle;
  margin: 0;
  padding: 0;
}

</style>
